<template>
  <div class="scroll-container">
    <div class="index">
      <div class="home">
        <div class="back1">
          <div style="font-family:'Microsoft YaHei';font-weight:500;color:black;margin-bottom:35%">
            <div>很遗憾!</div>
            {{ randomMessage }}
          </div>
          <div class="back1-content">
            <van-image width="30" height="30" src="./星火.png" />
            <span style="color: black;">{{ correctUserCount }}/{{ correctQuestionCount }}</span>
          </div>
          <div style="margin-top: 70px;">
            <van-image width="180" src="./返回培训.png" @click="onClickLeft" />
          </div>
        </div>

        <!-- <div class="box">
        <div class="form">
          <div class="background1">
      

        <div class="image"></div>
          </div>
          <div class="header">
            <h1>很遗憾</h1>
            <h2>未能取得星火</h2>
          </div>
          <div class="back1">
            <div class="back1-content">
              <img width="250" height="200" :src="image"  />
  
              <span style="color: black;">{{ correctUserCount }}/{{ correctQuestionCount }}</span>
            </div>
          </div>
        </div>
        </div>-->
      </div>
    </div>
  </div>
</template>
  
<script setup>
import { useRoute } from "vue-router";
import { ref, reactive, onBeforeUpdate, onMounted } from "vue";
import axios from "axios";
import { useStore } from "vuex";

const store = useStore();
const messages = ["未能取得星火"];
const randomMessage = ref("");
const route = useRoute();
const userCookie = ref("");
const correctUserCount = ref("");
const correctQuestionCount = ref("");

onMounted(() => {
  randomMessage.value = getRandomMessage();
  userCookie.value = getCookie("userName");
  axios
    .post("http://192.168.137.1:8080/museums/userAnswer/getUser", {
      currentUserName: userCookie.value
    })
    .then(res => {
      correctUserCount.value = res.data.userAnswer.correctCount;
      correctQuestionCount.value = res.data.questionCount;
      store.commit('setQuestionCount',correctQuestionCount.value)
      console.log(store.state.questionCount);
    });
});

function getRandomMessage() {
  const randomIndex = Math.floor(Math.random() * messages.length);
  return messages[randomIndex];
}

//获取cookie
const getCookie = name => {
  const cookieName = name + "=";
  const cookies = document.cookie.split(";");
  for (let i = 0; i < cookies.length; i++) {
    let cookie = cookies[i];
    while (cookie.charAt(0) === " ") {
      cookie = cookie.substring(1);
    }
    if (cookie.indexOf(cookieName) === 0) {
      return window.decodeURIComponent(
        cookie.substring(cookieName.length, cookie.length)
      );
    }
  }
  return "";
};

const onClickLeft = () => history.back();
</script>
  
<style lang="less" scoped>
.scroll-container {
  position: absolute; /* 添加绝对定位 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto; /* 允许纵向滚动 */
}
.home {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  height: 80%;
  width: 600px;
  background-color: #ffffff;
  border-radius: 50px;
  margin-bottom: 15%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.form {
  height: 70vh;
  padding: 40px;
  text-align: center;
}

.background1 {
  margin-bottom: 40px;
}

.header {
  margin-bottom: 20px;
  color: red;
}

.back1 {
  font-size: 45px;
  margin-top: 73%;
}

.back1-content {
  margin-top: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.index {
  height: 110%;
  display: flex;
  flex-direction: column;
  background-image: url(/public/回答错误.png);
  background-size: 100% 100%;
}

.image {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../src/assets/images/回答错误.png");
  z-index: 100;
}
</style>